<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>03-案例-监听属性的配置</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        p {
            font-size: 20px;
        }
        button {
            outline: none !important
        }
    </style>
</head>
<body>
    <!-- 
        总结：
            a. vm实例默认能对所有的属性进行监听，不管有多深都可以监听到
            b. 但是分发给程序员的 watch 属性，监听的方式需要自己定义，默认只监听第一层属性, 如果还有嵌套的引用数据，就监听不上，需要写上 deep
            c. 方式1： 对象的属性在创建之后是字符串，其实在早之前声明对象也是给键加引号的，只是后来简写了，所以在声明监听对象属性的时候，加引号就行
            d. 如果想监听数据内部所有数据的变化，才需要写上 deep: true
     -->
    <div id="demo">
        <div class="container">
            <h3>监听属性的配置</h3>
            <hr>
            <div>
                <p class="form-group">
                    <span>姓名：</span> <em>{{ uname }}</em>
                </p>
                <p class="form-group">
                    <span>年龄：</span> <em>{{ uage }}</em>
                </p>
                <!-- <p class="form-group">
                    <span>爱好：</span> <em>{{ hobby }}</em>
                </p> -->
                <p class="form-group">
                    <span>朋友：</span> <em>{{ friend.uname }} - {{ friend.uage }}</em>
                </p>
            </div>
            <div>
                <button class="btn btn-success" @click="uname = '蔡xx'">改名儿</button>
                <button class="btn btn-primary" @click="uage = 18">改年龄</button>
                <!-- <button class="btn btn-warning" @click="hobby[0] = '吃火锅'">改爱好</button> -->
                <button class="btn btn-warning" @click="friend.uname = '古力娜扎'; friend.uage = 38;">换个朋友</button>
                <button class="btn btn-danger" @click="friend.a.b.c = 29">单独修改朋友的年龄</button>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#demo',
            data: {
                uname: '张三',
                uage: 28,
                // hobby: ['唱', '跳', 'rap', '篮球']
                friend: {
                    uname: '迪丽热巴',
                    uage: 20,
                    a: {
                        b: {
                            c: 100
                        }
                    }
                }
            },
            // watch 可以监听数据的改变
            watch: {
                uname: {
                    handler() {
                        console.log('uname的值发生改变了！')
                    }
                },
                uage: {
                    handler() {
                        console.log('uage的值发生改变了！')
                    }
                },
                // 对象打点的属性，不能直接写，建议使用引号的方式
                // 'friend.uname': {
                //     handler() {
                //         console.log('对象的属性发生了改变！')
                //     }
                // }
                friend: {
                    handler() {
                        console.log('对象的属性发生了改变！')
                    },
                    // 深层监听
                    deep: true
                }
            }
        })
    </script>
</body>
</html>